<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <br>
            东 ： <span>{{ymax}}</span>
            <br>
            南 ： <span>{{xmax}}</span>
            <br>
            西 ： <span>{{ymin}}</span>
            <br>
            北 ： <span>{{xmin}}</span>
            <br>
            高度 ： <span>{{height}}</span>
            <br>
            中心点经度 ： <span>{{Centerlon}}</span>
            <br>
            中心点纬度 ： <span>{{Centerlat}}</span>
            <br>
            缩放层级 ：<span>{{zoom}}</span>
        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
export default {
    data() {
        return {
            Centerlat: '',
            Centerlon: '',
            height: '',
            xmax: '',
            xmin: '',
            ymax: '',
            ymin: '',
            zoom: '',
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.SenceMode = '3D';
        // 为了减少性能消耗，地图移动事件只有当地图移动之后 每一秒触发一次
        map.on('MapMove', (event) => {
            event.Centerlat && (this.Centerlat = event.Centerlat.toFixed(3));
            event.Centerlon && (this.Centerlon = event.Centerlon.toFixed(3));
            event.height && (this.height = event.height);
            event.xmax && (this.xmax = event.xmax.toFixed(3));
            event.xmin && (this.xmin = event.xmin.toFixed(3));
            event.ymax && (this.ymax = event.ymax.toFixed(3));
            event.ymin && (this.ymin = event.ymin.toFixed(3));
            event.zoom && (this.zoom = event.zoom);
        });
    },
    methods: {

    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
</style>